<template>
  <page title="月报明细" has-back>
    <h1>{{ part }} {{date}} 培训汇总</h1>
    <el-table :data="tableData.slice((currentPage-1)*currentSize,Math.min(currentPage*currentSize,tableData.length))" header-cell-class-name="table-header">
      <el-table-column
          prop="projectUid"
          label="项目编号">
      </el-table-column>
      <el-table-column
          prop="name"
          label="项目名称">
      </el-table-column>
      <el-table-column
          label="培训起止日期">
        <template #default="scope">
          <p style="margin: 0;">{{scope.row.startDate.substring(0,10)}}-{{scope.row.endDate.substring(0,10)}}</p>
        </template>
      </el-table-column>
      <el-table-column
          prop="people"
          label="培训人数">
      </el-table-column>
      <el-table-column
          prop="classroomUsage"
          label="使用教室（间次）">
      </el-table-column>
      <el-table-column
          prop="dormitoryUsage"
          label="使用宿舍（间夜）">
      </el-table-column>
      <el-table-column
          label="操作">
        <template #default="scope">
          <el-button
              type="text"
              @click="handleLook(scope.$index, scope.row)">查看需求表</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row justify="end" class="footer-pager">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 5, 6, 7, 8]"
          :page-size="currentSize"
          layout="sizes, prev, pager, next, jumper"
          :total="tableData.length">
      </el-pagination>
    </el-row>
  </page>
</template>

<script>
import Page from "@/components/Page";
import axios from "axios";
import moment from "moment";
export default {
  name: "MonthReportInfo",
  components: {Page},
  data(){
    return{
      tableData:[],
      currentPage: 1,
      currentSize: 8,
      date:'',
      part:'',
    }
  },
  methods:{
    findAllTrainInfo(part,id){
      return axios.get(this.$host+"/report/month/"+id+"?part="+part).then(response=>{
        if(response.data.code === 0){
          this.tableData = response.data.data.statisticList;
          this.date = moment(response.data.data.date).format("YYYY年M月");
        }else{
          this.$message.error(response.data.msg);
        }
      })
    },
    handleLook(index,row){
      this.$router.push('info?uid='+row.projectUid);
      row;
    },
    handleSizeChange(val) {
      this.currentSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
  },
  created() {
    let param = this.$router.currentRoute.value.query;
    this.part = param.part;
    this.findAllTrainInfo(param.part,param.id);
  }
}
</script>

<style scoped>

</style>